<template>

    <view class="userLayout pageBg" v-if="userInfo">
        <view class="userInfo">
            <view class="avatar">
                <image src="../../static/images/xinrubizilogo.jpg" mode=""></image>
            </view>
            <view class="ip">IP:{{userInfo.IP}}</view>
            <view class="address">来自：{{userInfo.address.city || userInfo.address.province}}
            </view>
        </view>
        <view class="section">
            <view class="list" @click="goDownloadList">
                <view class="left">
                    <uni-icons type="download-filled" color="#28b389"></uni-icons>
                    <view class="text">我的下载</view>
                </view>
                <view class="right">
                    <view class="text">{{userInfo.downloadSize}}</view>
                    <uni-icons type="forward" color="#28b389"></uni-icons>
                </view>
            </view>
            <view class="list" @click="goScoreList">
                <view class="left">
                    <uni-icons type="star-filled" color="#28b389"></uni-icons>
                    <view class="text">我的评分</view>
                </view>
                <view class="right">
                    <view class="text">{{userInfo.scoreSize}}</view>
                    <uni-icons type="forward" color="#28b389"></uni-icons>
                </view>
            </view>
            <view class="list">
                <view class="left">
                    <uni-icons type="chatboxes-filled" color="#28b389"></uni-icons>
                    <view class="text">联系客服</view>
                    <!-- #ifdef MP- -->
                    <button open-type="contact">联系客服</button>
                    <!-- #endif -->

                    <!-- #ifndef MP -->
                    <button @click="clickContact">拨打电话</button>
                    <!-- #endif -->

                </view>
                <view class="right">
                    <uni-icons type="forward" color="#28b389"></uni-icons>
                </view>
            </view>
        </view>
        <view class="section">
            <view class="list">
                <view class="left">
                    <uni-icons type="notification-filled" color="#28b389"></uni-icons>
                    <view class="text">订阅更新</view>
                </view>
                <view class="right">
                    <uni-icons type="forward" color="#28b389"></uni-icons>
                </view>
            </view>
            <view class="list">
                <view class="left">
                    <uni-icons type="flag-filled" color="#28b389"></uni-icons>
                    <view class="text">常见问题</view>
                </view>
                <view class="right">
                    <uni-icons type="forward" color="#28b389"></uni-icons>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        apiGetUserInfo
    } from '../../api/apis.js'
  
    import {
        ref
    } from 'vue';
    const clickContact = () => {
        uni.makePhoneCall({
            phoneNumber: '19143710661'
        })
    }

    const goDownloadList = () => {
        uni.navigateTo({
            url: '/pages/classlist/classlist?name=我的下载&type=download'
        })
    }

    const goScoreList = () => {
        uni.navigateTo({
            url: '/pages/classlist/classlist?name=我的评分&type=score'
        })
    }


    const userInfo = ref(null)
    const GetUserInfo = async () => {
        const res = await apiGetUserInfo()
        userInfo.value = res.data
        console.log(res);

    }

    GetUserInfo()


   
</script>

<style lang="scss" scoped>
    .userLayout {
        height: 100vh;

        .userInfo {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 200rpx 0 50rpx 0;

            .avatar {
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                overflow: hidden;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .ip {
                font-size: 44rpx;
                color: #333;
                padding: 20rpx 0 10rpx;
            }

            .address {
                font-size: 30rpx;
                color: #aaa;
            }
        }

        .section {
            background-color: #ffffff;
            margin: 50rpx 30rpx;
            overflow: hidden;
            border: 1rpx solid #d5d5d5;
            border-radius: 20rpx;
            box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.1);

            .list {
                width: 100%;
                height: 100rpx;
                padding: 0 30rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1rpx solid #d5d5d5;
                position: relative;

                button {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                }

                .left {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .text {
                        padding-left: 20rpx;
                        color: #464646;
                    }
                }

                .right {
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    .text {
                        padding-right: 20rpx;
                        color: #8c8c8c;
                    }
                }

                &:last-child {
                    border-bottom: 0;
                }
            }

        }

    }
</style>